<template>
  <div id="app">
    <HelloWorld msg="Welcome to bsimpleplayer Demo" />
    <dragBox msg=" 遮不住的网页元素" hikcc_cover="excluded" />
    <dragBox msg=" 遮得住的网页元素" hikcc_cover="opaque" />
    <button style="margin:6px;" @click="commonConfig">基本信息设置</button>
    <label>
      平台protocol:
      <input
        ref="txtProtocol"
        size="2"
        type="text"
        value="https"
        style="text-align: center"
      />
    </label>
    <label>
      平台IP:
      <input
        ref="txtPlatIp"
        size="10"
        type="text"
        value="10.17.70.126"
        style="text-align: center"
      />
    </label>
    <label>
      平台Port:
      <input ref="txtPlatPort" size="3" type="text" value="443" style="text-align: center" />
    </label>
    <label>
      token:
      <input
        ref="txtPlatToken"
        type="text"
        size="100"
        value="SElLIEVheHZ5M1RGMmxCajh0MlA6djY4Z1VsdXpqYUFTNVJwbVJzSTROcUhRbjU2QU5VTmwwbG5BNWlteG9mVT06MTYxNzc5OTEwODU0NQ=="
      />
      <!-- SElLIHZiWTF5bklLOU0wSytrL0c6ZkNSa3dpVVcrbk8yMk9GSk9YeE9uQU51OUNmWWREWm1XYU5IcWJlSmI1UT0= -->
    </label>
    <br />
    <br />
    <label v-show="platform.bUseUnivice">
      Authorization:
      <input
        ref="txtAuthorization"
        size="150"
        type="text"
        value="eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsc20iLCJpYXQiOjE2MTc3OTkwOTgsInVzZXIiOiJhZG1pbiJ9.djTXRLWVWl2a5y62W7JHjaJ8MPLO9KkJ5OGJre4HkdSSFEbqZ23Jwh_0yLgXSvGkV7Yy-5ey7WIAICbg5abAxQ"
      />
      <br />
      <br />
    </label>
    <!-- <label>
      是否开启差错隐藏:
      <input ref="iErrConceal" size="5" type="text" value="0" />
    </label>
    <br />-->
    <!-- <label>
      预览url:
      <input ref="txtUrl" size="70" type="text" value />
    </label>-->
    <!-- <br /> -->
    <!-- <br /> -->
    <label>
      indexcode1:
      <input
        ref="txtIndexcode"
        type="text"
        size="35"
        value="aa79911895734e6cb913fed4200b05d5"
      />
    </label>
    <label>
      indexcode2:
      <input
        ref="txtIndexcode2"
        type="text"
        size="35"
        value="aa79911895734e6cb913fed4200b05d5"
      />
    </label>
    <label>
      indexcode3:
      <input
        ref="txtIndexcode3"
        type="text"
        size="35"
        value="aa79911895734e6cb913fed4200b05d5"
      />
    </label>
    <br />
    <br />

    <button style="margin:6px;" @click="doEleFullScreem">将一个窗口全屏</button>
    <button style="margin:6px;" @click="setExist(true)">创建播放器</button>
    <button style="margin:6px;" @click="setExist(false)">销毁播放器</button>
    <button style="margin:6px;" @click="startPlayRealAll">全部预览</button>
    <button style="margin:6px;" @click="stopPlayRealAll">停止预览</button>
    <!-- <button style="margin:6px;" @click="startPlayBack" >开始回放</button>
    <button style="margin:6px;" @click="stopPlayBack" >停止回放</button>-->

    <hr />
    <label>截图功能测试:</label>
    <br />
    <label>
      抓拍模式（0:单张抓拍 1:按时连抓 2:按帧连抓）:
      <input ref="iSnapMode" size="2" type="text" value="1" />
      抓拍张数:
      <input ref="iSnapCounter" size="2" type="text" value="50" />
      抓拍间隔（毫秒）:
      <input ref="iSnapTime" size="2" type="text" value="100" />
      <button style="margin:6px;" @click="snapShotMulti">点击进行连续抓图</button>
      <button style="margin:6px;" @click="snapShot">单张抓图接口</button>
    </label>
    <br />
    <!-- <button style="margin:6px;" @click="getSnapShotPath" >获取截图路径</button>
    <button style="margin:6px;" @click="setSnapShotPath" >设置截图路径</button>-->
    <button style="margin:6px;" @click="getSnapShotConfig">获取截图参数</button>
    <button style="margin:6px;" @click="setSnapShotConfig">设置截图参数</button>
    <button style="margin:6px;" @click="getRealRecConfig">获取录像保存参数</button>
    <button style="margin:6px;" @click="setRealRecConfig">设置录像保存参数</button>
    <hr />
    <label>预览子功能测试:</label>
    <button style="margin:6px;" @click="ptz3DZoom(true)">进入框选3D放大状态</button>
    <button style="margin:6px;" @click="ptz3DZoom(false)">退出框选3D放大状态</button>
    <button style="margin:6px;" @click="realRecord(true)">开始紧急录像</button>
    <button style="margin:6px;" @click="realRecord(false)">停止紧急录像</button>
    <button style="margin:6px;" @click="digitalZoom(true)">进入电子放大模式</button>
    <button style="margin:6px;" @click="digitalZoom(false)">退出电子放大模式</button>
    <button style="margin:6px;" @click="deviceTalk(true)">开始对讲</button>
    <button style="margin:6px;" @click="deviceTalk(false)">停止对讲</button>
    <br />
    <hr />
    <label>回放子功能测试:</label>
    倍速 (输入-6,-5,-4,-3,-2,-1, 0, 1, 2, 3, 4 分别对应1/64, 1/32, 1/16, 1/8, 1/4, 1/2, 1, 2, 4, 8, 16 倍速):
    <input
      ref="iPlayBackSpeed"
      size="2"
      type="text"
      value="2"
    />
    <button style="margin:6px;" @click="speedPlay">倍速回放</button>

    <button style="margin:6px;" @click="pause(true)">暂停回放</button>
    <button style="margin:6px;" @click="pause(false)">恢复回放</button>
    <br />
    <button style="margin:6px;" @click="getOSDTime()">获取osdtime</button>

    <br />
    <div class="players-area">
      <div ref="test" class="player">
        <template v-if="0">
          <div class="content-err">
            <p>加载播放器失败，请检查插件是否正确安装；或刷新页面重试</p>
          </div>
        </template>
        <template v-else>
          <div class="simple-player-with-toolbar">
            <SimplePlayer
              v-if="exist"
              ref="example1"
              player-id="player1"
              :bind-policy="bindPolicy"
              :notify-method="onNotify"
              @load-result="onLoadResult"
              style="width: 100%;height:calc(100% - 1px);"
            />
          </div>
        </template>
        <div class="toolbar">
          <div style="text-align: center">
            <button style="margin:6px;" @click="startPlayRealByUrl">开始预览</button>
            <button style="margin:6px;" @click="stopPlayReal">停止预览</button>
            <button style="margin:6px;" @click="startPlayBackByIndexcode">开始回放</button>
            <button style="margin:6px;" @click="snapShot">单张截图</button>
          </div>
        </div>
      </div>
      <!-- <div class="player">
        <SimplePlayer
          v-if="exist"
          ref="example2"
          player-id="player2"
          :bind-policy="bindPolicy"
          :notify-method="onNotify"
          @load-result="onLoadResult"
          style="width: 100%;height:100%;"
        />
      </div>
      <div class="player">
        <SimplePlayer
          v-if="exist"
          ref="example3"
          player-id="player3"
          :bind-policy="bindPolicy"
          :notify-method="onNotify"
          @load-result="onLoadResult"
          style="width: 100%;height:100%;"
        />
      </div> -->
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import dragBox from "./components/dragBox.vue";
import {
  //ccWrapper,
  SimplePlayer,
  SimplePlayerConfig,
  crashOccurPromise,
  commonFuns
} from "client-container";

export default {
  name: "App",
  components: {
    HelloWorld,
    dragBox,
    SimplePlayer
  },
  data() {
    return {
      exist: true /* 播放器创建销毁 */,
      bindPolicy: 0 /* 创建播放器的类型 */,
      platform: {
        strProtocol: "" /* 平台协议 */,
        strPlatIp: "" /* 平台IP */,
        strPlatPort: "" /* 平台端口 */,
        strToken: "" /* token */,
        strAuthorization: "" /* Authorization */,
        iMultiRouteId: 0 /* 多线路Id */,
        strPlatLanguage: "zh_CN" /* 平台语言  en_US*/,
        bUseSac: true /* 回放是否需要从sac查询 */,
        bUseUnivice: true /* 是否过univice */,
        /* 水印配置 */
        strUserName: "admin" /* 用户名 */,
        bShowName: true /* 是否显示用户名 */,
        bShowIP: true /* 是否显示IP */,
        bShowMac: true /* 是否显示Mac */,
        /* 是否开启硬解 gpu解码 */
        bGpuEnable: false,
        /* 是否开启差错隐藏 0 1 2 3, 0不开启*/
        iErrConcealEnable: 0,
        /* 是否需要截图回调 */
        bGetSnap: false,
        /* 界面显示配置 */
        bShowCalendar: true /* 回放轴是否需要显示日历按钮 */,
        bShowDownload: false /* 回放轴是否需要显示下载器按钮 */
      }
    };
  },
  created: async function() {
    const vm = this;
    let innerH = window.innerHeight;
    let outH = window.outerHeight;
    console.log(" menu height "+ (outH - innerH));

    document.onkeydown = function(event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      e.preventDefault();
      if (e && e.keyCode == 27) {
        // 按 Esc
        console.log("按下Esc");
      }
      if (e && e.keyCode == 113) {
        // 按 F2
        console.log("按下F2");
      }
      if (e && e.keyCode == 13) {
        // enter 键
        console.log("按下enter");
      }
      if (e && e.keyCode == 32) {
        // space 键
        console.log("按下空格");
        vm.pause(true);
      }
    };

    await crashOccurPromise;
  },
  methods: {
    commonConfig() {
      let params = {
        strProtocol: this.$refs.txtProtocol.value /* 平台协议 */,
        strPlatIp: this.$refs.txtPlatIp.value /* 平台IP */,
        strPlatPort: this.$refs.txtPlatPort.value /* 平台端口 */,
        strToken: this.$refs.txtPlatToken.value /* token */,
        iMultiRouteId: this.platform.iMultiRouteId /* 多网域线路id */,
        strPlatLanguage: this.platform.strPlatLanguage /* 语言 */,

        bUseSac: this.platform.bUseSac /* 回放是否要从sac查询 */,
        bUseUnivice: this.platform.bUseUnivice /* 是否要过univice服务 */,
        strAuthorization: this.$refs.txtAuthorization
          .value /* 如果过了univice服务需要authorization */,

        strUserName: this.platform.strUserName /* 用户名 */,
        bShowName: this.platform.bShowName /* 是否需要显示用户名水印 */,
        bShowIP: this.platform.bShowIP /* 是否需要显示用户IP水印 */,
        bShowMac: this.platform.bShowMac /* 是否需要显示用户mac水印 */,
        //bGpuEnable: this.platform.bGpuEnable /* 是否开启GPU解码 */,
        bGpuEnable: this.platform.bGpuEnable /* 是否开启GPU解码 */,
        //iErrConcealEnable: this.$refs.iErrConceal.value /* 是否开启差错隐藏 */,
        bGetSnap: this.platform.bGetSnap /* 是否需要截图图片回调 */,
        bShowCalendar: this.platform
          .bShowCalendar /* 回放轴是否需要显示日历按钮 */,
        bShowDownload: this.platform
          .bShowDownload /* 回放轴是否需要显示下载器按钮 */
      };
      SimplePlayerConfig(params);
    },
    getSnapShotPath() {
      commonFuns.getSnapShotPath({});
    },
    setSnapShotPath() {
      commonFuns.setSnapShotPath({ strSnapPath: "D:/capture" });
    },
    async getSnapShotConfig() {
      let res = await commonFuns.getSnapShotConfig({});
      console.log(res);
    },
    setSnapShotConfig() {
      let params = {
        strSnapPath: "D:/capture" /* 截图保存路径 */,
        iSnapMode: 1 /* 连续抓拍模式 1按时间连续抓拍 2按帧连续抓拍 */,
        iSnapCounter: 15 /* 连续抓拍张数 */,
        iSnapIntervalTime: 200 /* 按时间抓拍的时间间隔设置 */
      };
      commonFuns.setSnapShotConfig(params);
    },
    
    async getRealRecConfig() {
      let res = await commonFuns.getRealRecConfig({});
      console.log(res);
    },
    setRealRecConfig() {
      let params = {
        strRecordPath: "D:/record" /* 紧急录像保存路径 */,
      };
      commonFuns.setRealRecConfig(params);
    },

    // 2.1 根据监控点信息进行预览
    startPlayRealByIndexcode() {
      let params = {};
      params.strIndexcode = this.$refs.txtIndexcode.value; /* 监控点编号 */
      params.transmode = 1; /* 取流方式 0 UDP 1 TCP  */
      params.streamType = 0; /* 0主码流 1子码流*/
      params.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 0不是 1是*/
      this.$refs.example1.startPlayReal(params);
    },
    // 2.2 根据取流url进行预览
    startPlayRealByUrl() {
      let params = {};
      params.streamDispatchMode = 0; /* vnsc查询得到的转流方式 */
      params.url =
        "rtsp://10.33.51.136:655/EUrl/v3yIhaM"; /* vnsc查询得到的取流url*/
      this.$refs.example1.startPlayReal(params);
    },
    // 停止预览
    stopPlayReal() {
      this.$refs.example1.doClear({});
    },
    // 3.1 根据监控点信息及开始结束时间进行查询并回放
    startPlayBackByIndexcode() {
      let params = {};
      let queryParams = {}; /* 回放请求体参数 */
      queryParams.indexCode = "1be41a2cfb7b46369740d016f018a309";
      //this.$refs.txtIndexcode.value; /* 监控点编号 */
      queryParams.recordStyle = 0; /* 传0是查询中心存储  传1是查询设备存储 */
      queryParams.recordType =
        "0|1|2|6"; /* 录像类型 传空查询全部录像片段 "0|1|2|6" 0定时录像 1移动侦测 2报警触发 6手动录像 */
      queryParams.transmode = 1; /*0 UDP 1 TCP*/
      queryParams.streamType = 0; /* 0主码流 1子码流 */
      /* ISO带时区格式时间 2019-11-15T00:00:00.000+08:00*/
      queryParams.startTime = "2021-03-16T00:00:00.000+08:00";
      queryParams.endTime = "2021-03-16T19:56:47.000+08:00";
      params.strRecordParam = queryParams;
      params.bShowDownload = false; /* 是否需要显示下载录像片段入口 */
      let res = this.$refs.example1.startPlayBack(params);
      console.log("startPlayBack reslut:" + JSON.stringify(res));
    },
    // 3.2 根据sac查询到的录像信息进行回放
    startPlayBackBySacUrl() {
      /* strRecordResponse 格式: 
           { 
              streamDispatchMode:0,
              url:rtsp://10.33.51.136:6304/EUrl/LwjHyGQ,
              list:[{ beginTime:2020-12-15T00:00:00.000+08:00,endTime:2020-12-15T17:35:52.794+08:00 }]
            }
        */
      let params = {};
      let responseParams = {};
      responseParams.streamDispatchMode = 0;
      responseParams.url = "rtsp://10.19.134.128:6304/EUrl/9RLO3Pq";
      let listParams = [];
      listParams.push({
        beginTime: "2021-01-12T16:43:36.000+08:00",
        endTime: "2021-01-12T16:43:45.000+08:00"
      });
      responseParams.list = listParams;
      params.strRecordResponse = responseParams;
      let res = this.$refs.example1.startPlayBack(params);
      console.log("startPlayBack reslut:" + JSON.stringify(res));
    },
    // 3.3 根据云存储rtsp url进行回放
    startPlayBackByHcsUrl() {
      /* 
          strRtspUrl 格式:
          rtsp://admin:whhik_88075998@10.192.81.13:6304/file/cvm://10.192.81.13:6021/tracks/    \
          2345_cece0bc21a615d6e7134d029a5b12786?range=20191024T170112000-20191024T170134000&recordtype=0|1|2|6&fileformat=1
      */
      let params = {};
      params.bRtspUrlPlay = true;
      params.strRtspUrl =
        "rtsp://admin:ga@hik123@10.17.70.43:6304/file/cvm://10.17.70.43:6021/tracks/    \
        42_596b455e2ccc57446261ef47b16a965c?range=20210106T150015000-20210106T150040000&recordtype=0|1|2|6&fileformat=1";
      let res = this.$refs.example1.startPlayBack(params);
      console.log("startPlayBack reslut:" + JSON.stringify(res));
    },
    startPlayRealAll() {
      let params1 = {};
      params1.strIndexcode = this.$refs.txtIndexcode.value; /* 监控点编号 */
      params1.transmode = 1; /* 取流方式 0 UDP 1 TCP  */
      params1.streamType = 0; /* 0主码流 1子码流*/
      params1.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 默认0不是 1是*/
      // params1.url = this.$refs.txtUrl.value; /* 预览取流url */
      params1.streamDispatchMode = 0; /* 转流方式由vnsc返回 */
      this.$refs.example1.startPlayReal(params1);

      let params2 = {};
      params2.strIndexcode = this.$refs.txtIndexcode2.value; /* 监控点编号 */
      params2.transmode = 1; /* 取流方式 0 UDP 1 TCP  */
      params2.streamType = 0; /* 0主码流 1子码流*/
      params2.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 默认0不是 1是*/
      //params2.url = this.$refs.txtUrl.value; /* 预览取流url */
      params2.streamDispatchMode = 0; /* 转流方式由vnsc返回 */
      this.$refs.example2.startPlayReal(params2);
      let params3 = {};
      params3.strIndexcode = this.$refs.txtIndexcode3.value; /* 监控点编号 */
      params3.transmode = 1; /* 取流方式 0 UDP 1 TCP  */
      params3.streamType = 0; /* 0主码流 1子码流*/
      params3.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 默认0不是 1是*/
      //params3.url = this.$refs.txtUrl.value; /* 预览取流url */
      params3.streamDispatchMode = 0; /* 转流方式由vnsc返回 */
      this.$refs.example3.startPlayReal(params3);
    },

    stopPlayRealAll() {
      this.$refs.example1.doClear({});
      this.$refs.example2.doClear({});
      this.$refs.example3.doClear({});
    },

    startPlayBack() {
      /* 非必填 云存储rtsp及时间进行回放 */
    },
    stopPlayBack() {
      this.$refs.example1.stopPlayBack({});
    },
    /* 连续抓拍接口 */
    snapShotMulti() {
      let params1 = {};
      params1.strCameraName = "cameraNamehh"; /* 换成需要保存的截图名称 */
      params1.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 默认0不是 1是*/
      params1.iSnapMode = parseInt(
        this.$refs.iSnapMode.value
      ); /* 1:按时间连续抓拍 2:按帧连续抓拍*/
      params1.iSnapTime = parseInt(
        this.$refs.iSnapTime.value
      ); /* 抓拍时间间隔ms */
      params1.iSnapCounter = parseInt(
        this.$refs.iSnapCounter.value
      ); /* 抓拍张数 */
      //params1.strSavePath = "D:/capture"; /* 换成保存截图的路径 */
      this.$refs.example1.snapShot(params1);
    },
    /* 单张截图接口 */
    snapShot() {
      let params1 = {};
      params1.strCameraName = "cameraName"; /* 换成需要保存的截图名称 */
      params1.isSmallEagleEyeAbility = 0; /* 是否是小鹰眼设备 默认0不是 1是*/
      //params1.strSavePath = "C:/capture"; /* 换成保存截图的路径 */
      //params1.iSnapMode = 0; /* 抓拍模式0 单张 */
      this.$refs.example1.snapShot(params1);
    },
    /* 3D放大接口 */
    ptz3DZoom(bStart) {
      let params = {};
      params.bStart = bStart; //true进入3D放大状态  false结束3D放大状态
      params.strUserPriority = "10"; //用户优先级
      params.strUserId = "admin"; //用户编号和用户名不一样
      params.iCascade = 0; /* 是否级联 0本联 1级联*/
      params.iSpeed = 50; /* 速度不传默认50 */
      this.$refs.example3.ptz3DZoom(params);
    },
    /* 倍速回放接口 */
    speedPlay() {
      let params = {};
      /* 
         iPlayBackSpeed:
           -6,   -5,   -4,   -3,  -2,  -1, 0, 1, 2, 3, 4  对应
         1/64, 1/32, 1/16,  1/8, 1/4, 1/2, 1, 2, 4, 8, 16 倍速
      */
      params.iPlayBackSpeed = parseInt(this.$refs.iPlayBackSpeed.value);
      params.bShowSpeedPlayWnd = true; /* 是否需要展示速度选择框 */
      this.$refs.example1.speedPlay(params);
    },
    /* 暂停、恢复回放 */
    pause(bPause) {
      let params = {};
      params.bPause = bPause; /* true暂停 false恢复 */
      this.$refs.example1.pause(params);
    },
    /* 获取osdtime */
    async getOSDTime() {
      let params = {};
      let res = await this.$refs.example1.getOSDTime(params);
      console.log("getOSDTime(): " + JSON.stringify(res));
    },
    /* 紧急录像接口 */
    realRecord(bOpen) {
      let params = {};
      params.strCameraName = "cameraName"; /* 换成需要保存的录像名称 */
      params.strRecordPath = "D:/record"; /* 换成保存录像的路径 */
      params.iSaveMode = 0; /* 0是正常切片模式 1是设置最大值关闭 */
      params.bOpen = bOpen; //true开始  false结束
      this.$refs.example1.realRecord(params);
    },
    /* 电子放大接口 */
    digitalZoom(bStart) {
      let params = {};
      params.bStart = bStart; //true进入电子放大模式  false退出电子放大模式
      this.$refs.example1.digitalZoom(params);
    },

    /* 对讲接口 */
    deviceTalk(bStart) {
      let params = {};
      params.bStart = bStart; //true开始  false结束
      params.strIndexcode = this.$refs.txtIndexcode.value;
      this.$refs.example1.deviceTalk(params);
    },
    doEleFullScreem() {
      console.log("enter doEleFullScreem");
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        //let d = this.$refs.example1;
        let d = this.$refs.test;
        d.requestFullscreen();
      }
    },
    onNotify(player, msg) {
      /* 
          客户端给前端发消息在这接收
      */
      console.log(msg);
    },
    onLoadResult(player, errCode, data) {
      if (errCode === 0) {
        console.log("load success");
      } else {
        console.error("load failed errCode:" + errCode + ",content:" + data);
        //加载失败
      }
    },
    setExist(bExist) {
      /* 
        不再暴露销毁播放器接口
        删除播放器绑定元素后自动调用销毁
      */
      this.exist = bExist;
      //ccWrapper.ccUpdateAllWindow();
    },
    GetListImg() {
      var that = this;
      that
        .$axios({
          methods: "get",
          //接口地址  api-代理+接口端口号之后的其余地址
          //url: "/api/index/data"
          url:
            "http://56.13.104.92:6080/arcgis/rest/services/file73/roadLable1010/MapServer/tile/13/8262/11788"
        })
        .then(response => {
          //验证数据是否获取到
          console.log("test http" + response.data);
          //that.httpReturn = response.data.data.listone;
          //console.log(that.httpReturn);
        });
    },
    do100GET() {
      for (var num = 0; num < 100; num++) {
        this.GetListImg();
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.players-area {
  display: flex;
  height: 312px;
  justify-content: center;
  position: relative;
}
.player {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  position: relative;
  margin: 6px;
}
.simple-player-with-toolbar {
  flex-grow: 1;
  height: 0;
  background-color: rgb(189, 72, 72);
  width: 100%;
}
.toolbar {
  height: 35px;
  position: absolute;
  top: calc(100% - 5px);
  width: 100%;
}
.content-err {
  width: 100%;
  height: calc(100% - 30px);
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>